<template>
<div style="height: 100%">
<el-card style="height: 100%">
  <section class="search">
    <!-- <el-card> -->
        <el-form :inline="true" :model="filters" class="demo-form-inline">
        <el-form-item label="搜索关键字:">
          <el-input v-model="filters.keyword"></el-input>
        </el-form-item>
        <el-form-item label="创建时间:">
          <el-date-picker
            v-model="filters.createTime"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    <!-- </el-card> -->
  </section>

  
  <section class="table">

      <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
      </el-table>

  </section>
</el-card>
</div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";


interface TableDataItem {
  date: string;
  name: string;
  address: string;
}

const tableData :TableDataItem[]= [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]



const filters:any = reactive({
  keyword:"",
  createTime:"",
});

const handleSearch = ()=>{

  console.log(filters.keyword)

}






</script>

<style scoped lang="scss">
    .table{
      padding:10px;
      margin-top:15px ;
    }
    .search{
      padding:10px;
    }
</style>
